<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="Cache-Control" content="no-transform" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<!--uc强制竖屏-->
	<meta name="screen-orientation" content="portrait">
	<!--QQ强制竖屏-->
	<meta name="x5-orientation" content="portrait">
	<meta name="format-detection" content="telephone=no,email=no">
	<link rel="stylesheet" href="css/public.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/commes.css" />
	<link rel="stylesheet" href="css/photoswipe.css"> 
	<link rel="stylesheet" href="css/default-skin/default-skin.css">
	<title>玩乐秀</title>
	<style>
		#content a img.last {
			margin-right: 0;
		}
	</style>
</head>

<body style='background: #fff;'>
	<div class="hd">
		<a href=""><img src="images/public_lt.png" alt=""></a>
		<h4>玩乐秀</h4>
	</div>
	<div class='playShow_wrapper'>
		<div class='playShow_top'>
			<img src="./images/playShow_bg.png" alt="">
			<div>
				<img src="./images/LEGO_logo.png" alt="">
				<h2>晒出你的作品每天多点创造力</h2>
				<p>还可能获得颗粒哦～ </p>
			</div>
			<a href=""><img src="./images/playShow_camera.png" alt=""></a>
		</div>
		<p><b class='leftRadius addBgColor'>综合</b><b class='rightRadius'>最新</b></p>
	</div>


	<div class="container">
		<!--用户头像-->
		<div class="header">
			<div><img src="images/s1_m.jpg" /></div>
		</div>
		<div class="right_con">
			<div class="demo">
				<!--用户名and发布时间-->
				<div class="use">
					<div class="usename"><span>徐静蕾</span><em class="pub-time">刚刚</em></div>
				</div>
				<!--分享的内容-->
				<p class="fx_content">历时8小时，终于完成了！
					<span>快来夸我吧~</span>
				</p>
				<!--分享的图片-->
				<div class="my-gallery">
					<figure>
						<a href="images/s1.jpg" data-size="800x1142">
							<img src="images/s1_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s2.jpg" data-size="800x1142">
							<img src="images/s2_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s3.jpg" data-size="800x1142">
							<img src="images/s3_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s4.jpg" data-size="800x1142">
							<img src="images/s4_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s5.jpg" data-size="800x1142">
							<img src="images/s5_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s3.jpg" data-size="800x1142">
							<img src="images/s3_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s4.jpg" data-size="800x1142">
							<img src="images/s4_m.jpg" />
						</a>
					</figure>
					<figure>
						<a href="images/s5.jpg" data-size="800x1142">
							<img src="images/s5_m.jpg" />
						</a>
					</figure>
				</div>
				<!-- 聊天 -->
				<ul class='playShow_listChat'>
					<li><img src="./images/playShow_icon1-1.png" class="icon1_dark"><b>18</b></li>
					<!--playShow_icon1是亮的图片  -->

					<li><img src="./images/playShow_icon2-1.png" class="icon2_dark"><b>18</b></li>
					<!--playShow_icon2是亮的图片  -->

					<li class='showInput'><img src="./images/playShow_icon3.png" alt=""><b>18</b></li>
				</ul>
				<!-- 评论隐藏 -->
				<div class='isShowInput' style='display:none'>
					<input type="text">
					<button class='isShowBtn'>确定</button>
				</div>
				<!-- 评论隐藏 -->
				<div class='playShow_discuss'>
					<p>一只枇杷：<span>good啊</span></p>
					<p>星期五：<span>好厉害好厉害,</span></p>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<!--用户头像-->
		<div class="header">
			<div><img src="images/s1_m.jpg" /></div>
		</div>
		<div class="right_con">
			<div class="demo">
				<!--用户名and发布时间-->
				<div class="use">
					<div class="usename"><span>徐静蕾</span><em class="pub-time">今天12:32</em></div>
				</div>
				<!--分享的内容-->
				<p class="fx_content">你不知道的晨跑，好阿克汉公交卡华工科技虎口夺食消息，合作谈妥了！！！</p>
				<!--分享的图片-->
				<div class="my-gallery my_gallery1">
					<figure>
						<a href="images/s1.jpg" data-size="800x1142">
							<img src="images/s1_m.jpg" alt="Image description" />
						</a>
					</figure>
				</div>
			</div>
		</div>
	</div>
	<div class="container" >
		<!--用户头像-->
		<div class="header">
			<div><img src="images/s1_m.jpg" /></div>
		</div>
		<div class="right_con">
			<div class="demo">
				<!--用户名and发布时间-->
				<div class="use">
					<div class="usename"><span>徐静蕾</span><em class="pub-time">今天10:59</em></div>
				</div>
				<!--分享的内容-->
				<p class="fx_content">你不知道的晨跑，好消息，合作谈妥了！！！</p>
				<!--分享的图片-->
				<div class="my-gallery">
					<figure>
						<a href="images/s1.jpg" data-size="800x1142">
							<img src="images/s1_m.jpg" alt="Image description" />
						</a>
					</figure>
					<figure>
						<a href="images/s2.jpg" data-size="800x1142">
							<img src="images/s2_m.jpg" alt="Image description" />
						</a>
					</figure>
				</div>
				<!--显示的位置-->
				<!-- <div class="fx_address">来源：黄蜂网</div> -->
			</div>
		</div>
	</div>
	<!--以下内容不要管-->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="pswp__bg"></div>
		<div class="pswp__scroll-wrap">
			<div class="pswp__container">
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
			</div>
			<div class="pswp__ui pswp__ui--hidden">
				<div class="pswp__top-bar">
					<div class="pswp__counter"></div>
					<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
					<div class="pswp__preloader">
						<div class="pswp__preloader__icn">
							<div class="pswp__preloader__cut">
								<div class="pswp__preloader__donut"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
					<div class="pswp__share-tooltip"></div>
				</div>
				<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
				<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
				<div class="pswp__caption">
					<div class="pswp__caption__center"></div>
				</div>
			</div>
		</div>
	</div>















	<script src="js/rem.js"></script>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/photoswipe.min.js"></script>
	<script src="js/photoswipe-ui-default.min.js"></script>

	<!--鼠标控制滚动-->
	<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.js"></script>
	<script type="text/javascript">
		// 全屏图片的
		var initPhotoSwipeFromDOM = function (gallerySelector) {

			// parse slide data (url, title, size ...) from DOM elements 
			// (children of gallerySelector)
			var parseThumbnailElements = function (el) {
				var thumbElements = el.childNodes,
					numNodes = thumbElements.length,
					items = [],
					figureEl,
					linkEl,
					size,
					item;

				for (var i = 0; i < numNodes; i++) {

					figureEl = thumbElements[i]; // <figure> element

					// include only element nodes 
					if (figureEl.nodeType !== 1) {
						continue;
					}

					linkEl = figureEl.children[0]; // <a> element

					size = linkEl.getAttribute('data-size').split('x');

					// create slide object
					item = {
						src: linkEl.getAttribute('href'),
						w: parseInt(size[0], 10),
						h: parseInt(size[1], 10)
					};



					if (figureEl.children.length > 1) {
						// <figcaption> content
						item.title = figureEl.children[1].innerHTML;
					}

					if (linkEl.children.length > 0) {
						// <img> thumbnail element, retrieving thumbnail url
						item.msrc = linkEl.children[0].getAttribute('src');
					}

					item.el = figureEl; // save link to element for getThumbBoundsFn
					items.push(item);
				}

				return items;
			};

			// find nearest parent element
			var closest = function closest(el, fn) {
				return el && (fn(el) ? el : closest(el.parentNode, fn));
			};

			// triggers when user clicks on thumbnail
			var onThumbnailsClick = function (e) {
				e = e || window.event;
				e.preventDefault ? e.preventDefault() : e.returnValue = false;

				var eTarget = e.target || e.srcElement;

				// find root element of slide
				var clickedListItem = closest(eTarget, function (el) {
					return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
				});

				if (!clickedListItem) {
					return;
				}

				// find index of clicked item by looping through all child nodes
				// alternatively, you may define index via data- attribute
				var clickedGallery = clickedListItem.parentNode,
					childNodes = clickedListItem.parentNode.childNodes,
					numChildNodes = childNodes.length,
					nodeIndex = 0,
					index;

				for (var i = 0; i < numChildNodes; i++) {
					if (childNodes[i].nodeType !== 1) {
						continue;
					}

					if (childNodes[i] === clickedListItem) {
						index = nodeIndex;
						break;
					}
					nodeIndex++;
				}



				if (index >= 0) {
					// open PhotoSwipe if valid index found
					openPhotoSwipe(index, clickedGallery);
				}
				return false;
			};

			// parse picture index and gallery index from URL (#&pid=1&gid=2)
			var photoswipeParseHash = function () {
				var hash = window.location.hash.substring(1),
					params = {};

				if (hash.length < 5) {
					return params;
				}

				var vars = hash.split('&');
				for (var i = 0; i < vars.length; i++) {
					if (!vars[i]) {
						continue;
					}
					var pair = vars[i].split('=');
					if (pair.length < 2) {
						continue;
					}
					params[pair[0]] = pair[1];
				}

				if (params.gid) {
					params.gid = parseInt(params.gid, 10);
				}

				return params;
			};

			var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
				var pswpElement = document.querySelectorAll('.pswp')[0],
					gallery,
					options,
					items;

				items = parseThumbnailElements(galleryElement);

				// define options (if needed)
				options = {
					// define gallery index (for URL)
					galleryUID: galleryElement.getAttribute('data-pswp-uid'),
					getThumbBoundsFn: function (index) {
						// See Options -> getThumbBoundsFn section of documentation for more info
						var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
							pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
							rect = thumbnail.getBoundingClientRect();

						return {
							x: rect.left,
							y: rect.top + pageYScroll,
							w: rect.width
						};
					}

				};

				// PhotoSwipe opened from URL
				if (fromURL) {
					if (options.galleryPIDs) {
						// parse real index when custom PIDs are used 
						// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
						for (var j = 0; j < items.length; j++) {
							if (items[j].pid == index) {
								options.index = j;
								break;
							}
						}
					} else {
						// in URL indexes start from 1
						options.index = parseInt(index, 10) - 1;
					}
				} else {
					options.index = parseInt(index, 10);
				}

				// exit if index not found
				if (isNaN(options.index)) {
					return;
				}

				if (disableAnimation) {
					options.showAnimationDuration = 0;
				}

				// Pass data to PhotoSwipe and initialize it
				gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
				gallery.init();
			};

			// loop through all gallery elements and bind events
			var galleryElements = document.querySelectorAll(gallerySelector);

			for (var i = 0, l = galleryElements.length; i < l; i++) {
				galleryElements[i].setAttribute('data-pswp-uid', i + 1);
				galleryElements[i].onclick = onThumbnailsClick;
			}

			// Parse URL and open gallery if it contains #&pid=3&gid=1
			var hashData = photoswipeParseHash();
			if (hashData.pid && hashData.gid) {
				openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
			}
		};

		// execute above function
		initPhotoSwipeFromDOM('.my-gallery');
	</script>
	<script>
		$(function () {
			// 点赞的图标切换
			$('.icon1_dark').click(function () {
				$(this).attr('src', './images/playShow_icon1.png')

			})
			$('.icon2_dark').click(function () {
				$(this).attr('src', './images/playShow_icon2.png')
			})

			// 综合最新的按钮切换
			$('.rightRadius').click(function () {
				$('.leftRadius').removeClass('addBgColor')
				$('.rightRadius').addClass('addBgColor')
			})
			$('.leftRadius').click(function () {
				$('.rightRadius').removeClass('addBgColor')
				$('.leftRadius').addClass('addBgColor')
			})

			$('.showInput').click(function () {
				$('.isShowInput').css('display', 'block')
			})
			$('.isShowBtn').click(function () {
				$('.isShowInput').css('display', 'none')
				$('.playShow_discuss').css('display', 'block')
			})

		})
	</script>
</body>

</html>